<template>
  <div>
	<el-row class="tool_style">
		<el-button type="primary" title="新增文章" icon="el-icon-plus" circle @click="showAdd"></el-button>
		<el-button type="danger" title="删除文章" icon="el-icon-delete" circle @click="deleteAll"></el-button>
	</el-row>
    <!--表格内容-->
    <el-table
      ref="form"
      :data="tableData"
      style="width: 100%"
      border
      stripe
      highlight-current-row
      :default-sort="{prop: 'date', order: 'descending'}"
	  @selection-change="handleSelection"
	  >
      <el-table-column
        type="selection"
        width="45"
        align="center">
      </el-table-column>
      <el-table-column
        type="index"
        label="序号"
        width="50">
      </el-table-column>
      <el-table-column
        property="id"
        :show-overflow-tooltip="true"
        label="编号"
        width="180"
        sortable>
      </el-table-column>
      <el-table-column
        property="title"
        label="标题"
        width="180">
      </el-table-column>
      <el-table-column
        type="data"
        property="publishTime"
        label="发表时间"
        width="120">
      </el-table-column>

      <el-table-column
        property="status"
        label="状态"
        width="120">
        <template slot-scope="scope">
          <el-tooltip v-if="scope.row.status == 0" class="item" effect="dark"
                      content="下架" placement="top">
            <el-tag>下架</el-tag>
          </el-tooltip>
          <el-tooltip v-else-if="scope.row.status == 1" class="item" effect="dark"
                      content="上架" placement="top">
            <el-tag type="success">上架</el-tag>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        property="publishUserName"
        label="发布者"
        width="180">
      </el-table-column>
      <el-table-column
        label="操作"
        align="center">
        <template slot-scope="scope">
          <el-button circle
                     :icon="scope.row.status == 0 ? 'el-icon-top' : 'el-icon-bottom'"
                     :type="scope.row.status == 0 ? 'primary' : 'success'"
                     :title="scope.row.status == 0 ? '发布' : '撤销'"
                     size="small"
                     @click="targetDynamic(scope.row.id,scope.row.status)"></el-button>
          <el-button circle icon="el-icon-edit-outline" type="primary" title="编辑" size="small"
            @click="showEdit(scope.row.id)"></el-button>
          <el-button circle icon="el-icon-delete" type="danger" title="删除" size="small"
            @click="rowDel(scope.$index, scope.row, $event);"></el-button>
        </template>
      </el-table-column>
    </el-table>
	<!--分页-->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.pageNum"
        :page-sizes="[10, 15, 20]"
        :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="query.total">
      </el-pagination>
    </div>
	<right-panel :controlShow = "controlShow" @search="handleQuery" @reset="resetQuery('input')">
		<el-form size="mini" ref="input" :model="input" :rules="rules" label-width="80px">
			<el-form-item label="动态标题" prop="title">
				<el-input v-model="input.title" maxlength="20"></el-input>
			</el-form-item>
      <el-form-item label="发布时间" prop="publishTime">
        <el-input v-model="input.publishTime" maxlength="20"></el-input>
      </el-form-item>

      <el-form-item label="状态">
        <el-select v-model="input.status" placeholder="请选择状态">
          <el-option label="下架" :value="0"></el-option>
          <el-option label="上架" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发布者" prop="publishUser">
        <el-input v-model="input.publishUser" maxlength="20"></el-input>
      </el-form-item>
      <el-form-item label="动态内容" prop="content">
        <el-input v-model="input.publishTime" maxlength="20"></el-input>
      </el-form-item>
		</el-form>
	</right-panel>
	<el-dialog
	  :visible.sync="show"
      :title="!editId ? '新增' : '编辑'"
      width="860px"
      @close="dialogClose">
		<noticeEdit v-if="show" :editId="editId" @close="dialogClose" />
	</el-dialog>

  </div>
</template>

<script>
  import RightPanel from '@/components/RightPanel'
  import noticeEdit from './components/scienceDynamicEdit'
  import {select,del,targetScienceDynamic} from '@/api/scienceDynamic'
  export default {
	name: "noticeInfo",
	components: {
		RightPanel,
    noticeEdit
	},
    data() {
      return {
        selectedIds:[],
        controlShow:false,
        input: {
          title:null,//动态标题
          publishTime:null, //发布时间
          status:null,//科研动态的状态:1.上架 0.下架
          publishUser:null,//发布者
          content:null, //科研动态内容
        },
        query: {
          pageNum: 1,
          pageSize: 10,
          total:0,
        },
        editId:null,
        show: false,
        rules: {
            title: [
              {min: 0, max: 100, message: '长度在 0 到 100 个字之间。', trigger: 'blur'}
            ]
          },
            tableData: [],
          }
        },
    mounted(){
	    this.getData();
    },
    methods: {
      handleSelection(val) {
        this.selectedIds = [];
        for (var i = 0; i < val.length; i++) {
          this.selectedIds.push(val[i].id);
        }
      },
      deleteAll(){
        if (this.selectedIds.length == 0){
          this.$message.error("请选择至少一项")
          return;
        }
        this.delete(this.selectedIds);
      },
      delete(data) {
        let _this =this;
        this.$confirm('确定要删除选中数据吗？', '删除', {
          comfirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          let arr = new Array();
          for (let i = 0;i<data.length;i++) {
            // arr.push({"id":data[i]})
            arr.push(data[i])
          }
          del(arr).then(function (data) {
            if (data.code == 200){
              _this.$message.success('删除成功');
              _this.getData()
            } else{
              _this.$message.error(data.message);
            }
          })
          return false;
        });
      },
      dialogClose() {
        // 清空编辑表单
        this.show = false;
        this.editId = null;
        // 刷新数据
        this.getData();
      },
      showAdd(){
        this.show = true;
      },
      showEdit(id) {
        this.editId = id;
        this.show = true;
      },
      rowDel(index, row, event) {
        this.delete([row.id]);
      },
      handleQuery(show) {
        this.query.pageNum = 1;
        this.query.userName = this.input.userName;
        this.getData()
      },
      targetDynamic(id,status){
        let _this = this;
        targetScienceDynamic(id).then(function (data) {
          if (data.code == 200){
            _this.getData();
            _this.$message.success(status == 0 ? "科研动态发布成功!" : "科研动态撤销成功!");
          } else{
            _this.$message.error(data.message);
          }
        })
      },
      getData() {
        let _this = this;
        this.$refs.input.validate((valid) => {
          if (valid) {
            select(_this.input,_this.query).then(function (data) {
              if (data.code == 200){
                _this.tableData = data.data.list;
                _this.query.total = data.data.total;
              } else{
                _this.$message.error(data.message);
              }
            })
          } else {
            _this.controlShow=true;
            return false;
          }
        });
      },
      resetQuery(formName) {
        this.input.title = "";
        this.$refs[formName].resetFields();
      },
      handleSizeChange(pageSize) {
        this.query.pageSize = pageSize;
        this.getData()
      },
      handleCurrentChange(pageNum) {
        this.query.pageNum = pageNum;
        this.getData()
      },
    }
  }
</script>

<style scoped lang="less">
.el-form {
  padding: 0 10px;
}
.el-date-editor {
  width: 100% !important;
}
.el-pagination{
	margin-top: 10px;
	float: left;
}
.tool_style{
	padding: 10px 0;
}
</style>
